<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        body
        {
            line-height: 1.6em;
        }

        #hor-minimalist-a
        {
            font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
            font-size: 12px;
            background: #fff;
            margin: 45px;
            width: 480px;
            border-collapse: collapse;
            text-align: left;
        }
        #hor-minimalist-a th
        {
            font-size: 14px;
            font-weight: normal;
            color: #039;
            padding: 10px 8px;
            border-bottom: 2px solid #6678b1;
        }
        #hor-minimalist-a td
        {
            color: #669;
            padding: 9px 8px 0px 8px;
        }
        #hor-minimalist-a tbody tr:hover td
        {
            color: #009;
        }


        #hor-minimalist-b
        {
            font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
            font-size: 12px;
            background: #fff;
            margin: 45px;
            width: 480px;
            border-collapse: collapse;
            text-align: left;
        }
        #hor-minimalist-b th
        {
            font-size: 14px;
            font-weight: normal;
            color: #039;
            padding: 10px 8px;
            border-bottom: 2px solid #6678b1;
        }
        #hor-minimalist-b td
        {
            border-bottom: 1px solid #ccc;
            color: #669;
            padding: 6px 8px;
        }
        #hor-minimalist-b tbody tr:hover td
        {
            color: #009;
        }


        #ver-minimalist
        {
            font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
            font-size: 12px;
            margin: 45px;
            width: 480px;
            text-align: left;
            border-collapse: collapse;
        }
        #ver-minimalist th
        {
            padding: 8px 2px;
            font-weight: normal;
            font-size: 14px;
            border-bottom: 2px solid #6678b1;
            border-right: 30px solid #fff;
            border-left: 30px solid #fff;
            color: #039;
        }
        #ver-minimalist td
        {
            padding: 12px 2px 0px 2px;
            border-right: 30px solid #fff;
            border-left: 30px solid #fff;
            color: #669;
        }


        #box-table-a
        {
            font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
            font-size: 12px;
            margin: 45px;
            width: 480px;
            text-align: left;
            border-collapse: collapse;
        }
        #box-table-a th
        {
            font-size: 13px;
            font-weight: normal;
            padding: 8px;
            background: #b9c9fe;
            border-top: 4px solid #aabcfe;
            border-bottom: 1px solid #fff;
            color: #039;
        }
        #box-table-a td
        {
            padding: 8px;
            background: #e8edff;
            border-bottom: 1px solid #fff;
            color: #669;
            border-top: 1px solid transparent;
        }
        #box-table-a tr:hover td
        {
            background: #d0dafd;
            color: #339;
        }


        #box-table-b
        {
            font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
            font-size: 12px;
            margin: 45px;
            width: 480px;
            text-align: center;
            border-collapse: collapse;
            border-top: 7px solid #9baff1;
            border-bottom: 7px solid #9baff1;
        }
        #box-table-b th
        {
            font-size: 13px;
            font-weight: normal;
            padding: 8px;
            background: #e8edff;
            border-right: 1px solid #9baff1;
            border-left: 1px solid #9baff1;
            color: #039;
        }
        #box-table-b td
        {
            padding: 8px;
            background: #e8edff;
            border-right: 1px solid #aabcfe;
            border-left: 1px solid #aabcfe;
            color: #669;
        }


        #hor-zebra
        {
            font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
            font-size: 12px;
            margin: 45px;
            width: 480px;
            text-align: left;
            border-collapse: collapse;
        }
        #hor-zebra th
        {
            font-size: 14px;
            font-weight: normal;
            padding: 10px 8px;
            color: #039;
        }
        #hor-zebra td
        {
            padding: 8px;
            color: #669;
        }
        #hor-zebra .odd
        {
            background: #e8edff;
        }


        #ver-zebra
        {
            font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
            font-size: 12px;
            margin: 45px;
            width: 480px;
            text-align: left;
            border-collapse: collapse;
        }
        #ver-zebra th
        {
            font-size: 14px;
            font-weight: normal;
            padding: 12px 15px;
            border-right: 1px solid #fff;
            border-left: 1px solid #fff;
            color: #039;
        }
        #ver-zebra td
        {
            padding: 8px 15px;
            border-right: 1px solid #fff;
            border-left: 1px solid #fff;
            color: #669;
        }
        .vzebra-odd
        {
            background: #eff2ff;
        }
        .vzebra-even
        {
            background: #e8edff;
        }
        #ver-zebra #vzebra-adventure, #ver-zebra #vzebra-children
        {
            background: #d0dafd;
            border-bottom: 1px solid #c8d4fd;
        }
        #ver-zebra #vzebra-comedy, #ver-zebra #vzebra-action
        {
            background: #dce4ff;
            border-bottom: 1px solid #d6dfff;
        }


        #one-column-emphasis
        {
            font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
            font-size: 12px;
            margin: 45px;
            width: 480px;
            text-align: left;
            border-collapse: collapse;
        }
        #one-column-emphasis th
        {
            font-size: 14px;
            font-weight: normal;
            padding: 12px 15px;
            color: #039;
        }
        #one-column-emphasis td
        {
            padding: 10px 15px;
            color: #669;
            border-top: 1px solid #e8edff;
        }
        .oce-first
        {
            background: #d0dafd;
            border-right: 10px solid transparent;
            border-left: 10px solid transparent;
        }
        #one-column-emphasis tr:hover td
        {
            color: #339;
            background: #eff2ff;
        }


        #newspaper-a
        {
            font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
            font-size: 12px;
            margin: 45px;
            width: 480px;
            text-align: left;
            border-collapse: collapse;
            border: 1px solid #69c;
        }
        #newspaper-a th
        {
            padding: 12px 17px 12px 17px;
            font-weight: normal;
            font-size: 14px;
            color: #039;
            border-bottom: 1px dashed #69c;
        }
        #newspaper-a td
        {
            padding: 7px 17px 7px 17px;
            color: #669;
        }
        #newspaper-a tbody tr:hover td
        {
            color: #339;
            background: #d0dafd;
        }


        #newspaper-b
        {
            font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
            font-size: 12px;
            margin: 45px;
            width: 480px;
            text-align: left;
            border-collapse: collapse;
            border: 1px solid #69c;
        }
        #newspaper-b th
        {
            padding: 15px 10px 10px 10px;
            font-weight: normal;
            font-size: 14px;
            color: #039;
        }
        #newspaper-b tbody
        {
            background: #e8edff;
        }
        #newspaper-b td
        {
            padding: 10px;
            color: #669;
            border-top: 1px dashed #fff;
        }
        #newspaper-b tbody tr:hover td
        {
            color: #339;
            background: #d0dafd;
        }


        #newspaper-c
        {
            font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
            font-size: 12px;
            margin: 45px;
            width: 480px;
            text-align: left;
            border-collapse: collapse;
            border: 1px solid #6cf;
        }
        #newspaper-c th
        {
            padding: 20px;
            font-weight: normal;
            font-size: 13px;
            color: #039;
            text-transform: uppercase;
            border-right: 1px solid #0865c2;
            border-top: 1px solid #0865c2;
            border-left: 1px solid #0865c2;
            border-bottom: 1px solid #fff;
        }
        #newspaper-c td
        {
            padding: 10px 20px;
            color: #669;
            border-right: 1px dashed #6cf;
        }


        #rounded-corner
        {
            font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
            font-size: 12px;
            margin: 45px;
            width: 480px;
            text-align: left;
            border-collapse: collapse;
        }
        #rounded-corner thead th.rounded-company
        {
            background: #b9c9fe url('table-images/left.png') left -1px no-repeat;
        }
        #rounded-corner thead th.rounded-q4
        {
            background: #b9c9fe url('table-images/right.png') right -1px no-repeat;
        }
        #rounded-corner th
        {
            padding: 8px;
            font-weight: normal;
            font-size: 13px;
            color: #039;
            background: #b9c9fe;
        }
        #rounded-corner td
        {
            padding: 8px;
            background: #e8edff;
            border-top: 1px solid #fff;
            color: #669;
        }
        #rounded-corner tfoot td.rounded-foot-left
        {
            background: #e8edff url('table-images/botleft.png') left bottom no-repeat;
        }
        #rounded-corner tfoot td.rounded-foot-right
        {
            background: #e8edff url('table-images/botright.png') right bottom no-repeat;
        }
        #rounded-corner tbody tr:hover td
        {
            background: #d0dafd;
        }


        #background-image
        {
            font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
            font-size: 12px;
            margin: 45px;
            width: 480px;
            text-align: left;
            border-collapse: collapse;
            background: url('table-images/blurry.jpg') 330px 59px no-repeat;
        }
        #background-image th
        {
            padding: 12px;
            font-weight: normal;
            font-size: 14px;
            color: #339;
        }
        #background-image td
        {
            padding: 9px 12px;
            color: #669;
            border-top: 1px solid #fff;
        }
        #background-image tfoot td
        {
            font-size: 11px;
        }
        #background-image tbody td
        {
            background: url('table-images/back.png');
        }
        * html #background-image tbody td
        {
            /*
               ----------------------------
                PUT THIS ON IE6 ONLY STYLE
                AS THE RULE INVALIDATES
                YOUR STYLESHEET
               ----------------------------
            */
            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='table-images/back.png',sizingMethod='crop');
            background: none;
        }
        #background-image tbody tr:hover td
        {
            color: #339;
            background: none;
        }


        #gradient-style
        {
            font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
            font-size: 12px;
            margin: 45px;
            width: 480px;
            text-align: left;
            border-collapse: collapse;
        }
        #gradient-style th
        {
            font-size: 13px;
            font-weight: normal;
            padding: 8px;
            background: #b9c9fe url('table-images/gradhead.png') repeat-x;
            border-top: 2px solid #d3ddff;
            border-bottom: 1px solid #fff;
            color: #039;
        }
        #gradient-style td
        {
            padding: 8px;
            border-bottom: 1px solid #fff;
            color: #669;
            border-top: 1px solid #fff;
            background: #e8edff url('table-images/gradback.png') repeat-x;
        }
        #gradient-style tfoot tr td
        {
            background: #e8edff;
            font-size: 12px;
            color: #99c;
        }
        #gradient-style tbody tr:hover td
        {
            background: #d0dafd url('table-images/gradhover.png') repeat-x;
            color: #339;
        }


        #pattern-style-a
        {
            font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
            font-size: 12px;
            margin: 45px;
            width: 480px;
            text-align: left;
            border-collapse: collapse;
            background: url('table-images/pattern.png');
        }
        #pattern-style-a thead tr
        {
            background: url('table-images/pattern-head.png');
        }
        #pattern-style-a th
        {
            font-size: 13px;
            font-weight: normal;
            padding: 8px;
            border-bottom: 1px solid #fff;
            color: #039;
        }
        #pattern-style-a td
        {
            padding: 8px;
            border-bottom: 1px solid #fff;
            color: #669;
            border-top: 1px solid transparent;
        }
        #pattern-style-a tbody tr:hover td
        {
            color: #339;
            background: #fff;
        }


        #pattern-style-b
        {
            font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
            font-size: 12px;
            margin: 45px;
            width: 480px;
            text-align: left;
            border-collapse: collapse;
            background: url('table-images/patternb.png');
        }
        #pattern-style-b thead tr
        {
            background: url('table-images/patternb-head.png');
        }
        #pattern-style-b th
        {
            font-size: 13px;
            font-weight: normal;
            padding: 8px;
            border-bottom: 1px solid #fff;
            color: #039;
        }
        #pattern-style-b td
        {
            padding: 8px;
            border-bottom: 1px solid #fff;
            color: #669;
            border-top: 1px solid transparent;
        }
        #pattern-style-b tbody tr:hover td
        {
            color: #339;
            background: #cdcdee;
        }
    </style>
</head>
<body>
<table id="hor-minimalist-a" summary="Employee Pay Sheet">
    <thead>
    <tr>
        <th scope="col">Employee</th>
        <th scope="col">Salary</th>
        <th scope="col">Bonus</th>
        <th scope="col">Supervisor</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Stephen C. Cox</td>
        <td>$300</td>
        <td>$50</td>
        <td>Bob</td>
    </tr>
    <tr>
        <td>Josephin Tan</td>
        <td>$150</td>
        <td>-</td>
        <td>Annie</td>
    </tr>
    <tr>
        <td>Joyce Ming</td>
        <td>$200</td>
        <td>$35</td>
        <td>Andy</td>
    </tr>
    <tr>
        <td>James A. Pentel</td>
        <td>$175</td>
        <td>$25</td>
        <td>Annie</td>
    </tr>
    </tbody>
</table>

<table id="hor-minimalist-b" summary="Employee Pay Sheet">
    <thead>
    <tr>
        <th scope="col">Employee</th>
        <th scope="col">Salary</th>
        <th scope="col">Bonus</th>
        <th scope="col">Supervisor</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Stephen C. Cox</td>
        <td>$300</td>
        <td>$50</td>
        <td>Bob</td>
    </tr>
    <tr>
        <td>Josephin Tan</td>
        <td>$150</td>
        <td>-</td>
        <td>Annie</td>
    </tr>
    <tr>
        <td>Joyce Ming</td>
        <td>$200</td>
        <td>$35</td>
        <td>Andy</td>
    </tr>
    <tr>
        <td>James A. Pentel</td>
        <td>$175</td>
        <td>$25</td>
        <td>Annie</td>
    </tr>
    </tbody>
</table>


<table id="ver-minimalist" summary="Most Favorite Movies">
    <thead>
    <tr>
        <th scope="col">Comedy</th>
        <th scope="col">Adventure</th>
        <th scope="col">Action</th>
        <th scope="col">Children</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Scary Movie</td>
        <td>Indiana Jones</td>
        <td>The Punisher</td>
        <td>Wall-E</td>
    </tr>
    <tr>
        <td>Epic Movie</td>
        <td>Star Wars</td>
        <td>Bad Boys</td>
        <td>Madagascar</td>
    </tr>
    <tr>
        <td>Spartan</td>
        <td>LOTR</td>
        <td>Die Hard</td>
        <td>Finding Nemo</td>
    </tr>
    <tr>
        <td>Dr. Dolittle</td>
        <td>The Mummy</td>
        <td>300</td>
        <td>A Bug's Life</td>
    </tr>
    </tbody>
</table>

<table id="box-table-a" summary="Employee Pay Sheet">
    <thead>
    <tr>
        <th scope="col">Employee</th>
        <th scope="col">Salary</th>
        <th scope="col">Bonus</th>
        <th scope="col">Supervisor</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Stephen C. Cox</td>
        <td>$300</td>
        <td>$50</td>
        <td>Bob</td>
    </tr>
    <tr>
        <td>Josephin Tan</td>
        <td>$150</td>
        <td>-</td>
        <td>Annie</td>
    </tr>
    <tr>
        <td>Joyce Ming</td>
        <td>$200</td>
        <td>$35</td>
        <td>Andy</td>
    </tr>
    <tr>
        <td>James A. Pentel</td>
        <td>$175</td>
        <td>$25</td>
        <td>Annie</td>
    </tr>
    </tbody>
</table>


<table id="box-table-b" summary="Most Favorit Movies">
    <thead>
    <tr>
        <th scope="col">Comedy</th>
        <th scope="col">Adventure</th>
        <th scope="col">Action</th>
        <th scope="col">Children</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Scary Movie</td>
        <td>Indiana Jones</td>
        <td>The Punisher</td>
        <td>Wall-E</td>
    </tr>
    <tr>
        <td>Epic Movie</td>
        <td>Star Wars</td>
        <td>Bad Boys</td>
        <td>Madagascar</td>
    </tr>
    <tr>
        <td>Spartan</td>
        <td>LOTR</td>
        <td>Die Hard</td>
        <td>Finding Nemo</td>
    </tr>
    <tr>
        <td>Dr. Dolittle</td>
        <td>The Mummy</td>
        <td>300</td>
        <td>A Bug's Life</td>
    </tr>
    </tbody>
</table>


<table id="hor-zebra" summary="Employee Pay Sheet">
    <thead>
    <tr>
        <th scope="col">Employee</th>
        <th scope="col">Salary</th>
        <th scope="col">Bonus</th>
        <th scope="col">Supervisor</th>
    </tr>
    </thead>
    <tbody>
    <tr class="odd">
        <td>Stephen C. Cox</td>
        <td>$300</td>
        <td>$50</td>
        <td>Bob</td>
    </tr>
    <tr>
        <td>Josephin Tan</td>
        <td>$150</td>
        <td>-</td>
        <td>Annie</td>
    </tr>
    <tr class="odd">
        <td>Joyce Ming</td>
        <td>$200</td>
        <td>$35</td>
        <td>Andy</td>
    </tr>
    <tr>
        <td>James A. Pentel</td>
        <td>$175</td>
        <td>$25</td>
        <td>Annie</td>
    </tr>
    </tbody>
</table>


<table id="ver-zebra" summary="Most Favorite Movies">
    <colgroup>
        <col class="vzebra-odd" />
        <col class="vzebra-even" />
        <col class="vzebra-odd" />
        <col class="vzebra-even" />
    </colgroup>
    <thead>
    <tr>
        <th scope="col" id="vzebra-comedy">Comedy</th>
        <th scope="col" id="vzebra-adventure">Adventure</th>
        <th scope="col" id="vzebra-action">Action</th>
        <th scope="col" id="vzebra-children">Children</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Scary Movie</td>
        <td>Indiana Jones</td>
        <td>The Punisher</td>
        <td>Wall-E</td>
    </tr>
    <tr>
        <td>Epic Movie</td>
        <td>Star Wars</td>
        <td>Bad Boys</td>
        <td>Madagascar</td>
    </tr>
    <tr>
        <td>Spartan</td>
        <td>LOTR</td>
        <td>Die Hard</td>
        <td>Finding Nemo</td>
    </tr>
    <tr>
        <td>Dr. Dolittle</td>
        <td>The Mummy</td>
        <td>300</td>
        <td>A Bug's Life</td>
    </tr>
    </tbody>
</table>

<table id="one-column-emphasis" summary="2007 Major IT Companies' Profit">
    <colgroup>
        <col class="oce-first" />
    </colgroup>
    <thead>
    <tr>
        <th scope="col">Company</th>
        <th scope="col">Q1</th>
        <th scope="col">Q2</th>
        <th scope="col">Q3</th>
        <th scope="col">Q4</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Microsoft</td>
        <td>20.3</td>
        <td>30.5</td>
        <td>23.5</td>
        <td>40.3</td>
    </tr>
    <tr>
        <td>Google</td>
        <td>50.2</td>
        <td>40.63</td>
        <td>45.23</td>
        <td>39.3</td>
    </tr>
    <tr>
        <td>Apple</td>
        <td>25.4</td>
        <td>30.2</td>
        <td>33.3</td>
        <td>36.7</td>
    </tr>
    <tr>
        <td>IBM</td>
        <td>20.4</td>
        <td>15.6</td>
        <td>22.3</td>
        <td>29.3</td>
    </tr>
    </tbody>
</table>


<table id="newspaper-a" summary="2007 Major IT Companies' Profit">
    <thead>
    <tr>
        <th scope="col">Company</th>
        <th scope="col">Q1</th>
        <th scope="col">Q2</th>
        <th scope="col">Q3</th>
        <th scope="col">Q4</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Microsoft</td>
        <td>20.3</td>
        <td>30.5</td>
        <td>23.5</td>
        <td>40.3</td>
    </tr>
    <tr>
        <td>Google</td>
        <td>50.2</td>
        <td>40.63</td>
        <td>45.23</td>
        <td>39.3</td>
    </tr>
    <tr>
        <td>Apple</td>
        <td>25.4</td>
        <td>30.2</td>
        <td>33.3</td>
        <td>36.7</td>
    </tr>
    <tr>
        <td>IBM</td>
        <td>20.4</td>
        <td>15.6</td>
        <td>22.3</td>
        <td>29.3</td>
    </tr>
    </tbody>
</table>


<table id="newspaper-b" summary="2007 Major IT Companies' Profit">
    <thead>
    <tr>
        <th scope="col">Company</th>
        <th scope="col">Q1</th>
        <th scope="col">Q2</th>
        <th scope="col">Q3</th>
        <th scope="col">Q4</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <td colspan="5"><em>The above data were fictional and made up, please do not sue me</em></td>
    </tr>
    </tfoot>
    <tbody>
    <tr>
        <td>Microsoft</td>
        <td>20.3</td>
        <td>30.5</td>
        <td>23.5</td>
        <td>40.3</td>
    </tr>
    <tr>
        <td>Google</td>
        <td>50.2</td>
        <td>40.63</td>
        <td>45.23</td>
        <td>39.3</td>
    </tr>
    <tr>
        <td>Apple</td>
        <td>25.4</td>
        <td>30.2</td>
        <td>33.3</td>
        <td>36.7</td>
    </tr>
    <tr>
        <td>IBM</td>
        <td>20.4</td>
        <td>15.6</td>
        <td>22.3</td>
        <td>29.3</td>
    </tr>
    </tbody>
</table>

<table id="newspaper-c" summary="Personal Movie Rating">
    <thead>
    <tr>
        <th scope="col">Favorite</th>
        <th scope="col">Great</th>
        <th scope="col">Nice</th>
        <th scope="col">Bad</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Passion of the Christ</td>
        <td>Bourne Ultimatum</td>
        <td>Shoot 'Em Up</td>
        <td>Ali</td>
    </tr>
    <tr>
        <td>The Big Fish</td>
        <td>The Mummy</td>
        <td>Apocalypto</td>
        <td>Monster</td>
    </tr>
    <tr>
        <td>Shawshank Redemption</td>
        <td>Cold Mountain</td>
        <td>Indiana Jones</td>
        <td>Dead or Alive</td>
    </tr>
    <tr>
        <td>Greatest Story Ever Told</td>
        <td>I Am Legend</td>
        <td>Star Wars</td>
        <td>Saw 3</td>
    </tr>
    </tbody>
</table>


<table id="rounded-corner" summary="2007 Major IT Companies' Profit">
    <thead>
    <tr>
        <th scope="col" class="rounded-company">Company</th>
        <th scope="col" class="rounded-q1">Q1</th>
        <th scope="col" class="rounded-q2">Q2</th>
        <th scope="col" class="rounded-q3">Q3</th>
        <th scope="col" class="rounded-q4">Q4</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <td colspan="4" class="rounded-foot-left"><em>The above data were fictional and made up, please do not sue me</em></td>
        <td class="rounded-foot-right"> </td>
    </tr>
    </tfoot>
    <tbody>
    <tr>
        <td>Microsoft</td>
        <td>20.3</td>
        <td>30.5</td>
        <td>23.5</td>
        <td>40.3</td>
    </tr>
    <tr>
        <td>Google</td>
        <td>50.2</td>
        <td>40.63</td>
        <td>45.23</td>
        <td>39.3</td>
    </tr>
    <tr>
        <td>Apple</td>
        <td>25.4</td>
        <td>30.2</td>
        <td>33.3</td>
        <td>36.7</td>
    </tr>
    <tr>
        <td>IBM</td>
        <td>20.4</td>
        <td>15.6</td>
        <td>22.3</td>
        <td>29.3</td>
    </tr>
    </tbody>
</table>

<table id="background-image" summary="Meeting Results">
    <thead>
    <tr>
        <th scope="col">Employee</th>
        <th scope="col">Division</th>
        <th scope="col">Suggestions</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <td colspan="4">IE 6 users won't see the transparent background if the hack is not applied</td>
    </tr>
    </tfoot>
    <tbody>
    <tr>
        <td>Stephen C. Cox</td>
        <td>Marketing</td>
        <td>Make discount offers</td>
    </tr>
    <tr>
        <td>Josephin Tan</td>
        <td>Advertising</td>
        <td>Give bonuses</td>
    </tr>
    <tr>
        <td>Joyce Ming</td>
        <td>Marketing</td>
        <td>New designs</td>
    </tr>
    <tr>
        <td>James A. Pentel</td>
        <td>Marketing</td>
        <td>Better Packaging</td>
    </tr>
    </tbody>
</table>


<table id="gradient-style" summary="Meeting Results">
    <thead>
    <tr>
        <th scope="col">Employee</th>
        <th scope="col">Division</th>
        <th scope="col">Suggestions</th>
        <th scope="col">Rating</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <td colspan="4">Give background color to the table cells to achieve seamless transition</td>
    </tr>
    </tfoot>
    <tbody>
    <tr>
        <td>Stephen C. Cox</td>
        <td>Marketing</td>
        <td>Make discount offers</td>
        <td>3/10</td>
    </tr>
    <tr>
        <td>Josephin Tan</td>
        <td>Advertising</td>
        <td>Give bonuses</td>
        <td>5/10</td>
    </tr>
    <tr>
        <td>Joyce Ming</td>
        <td>Marketing</td>
        <td>New designs</td>
        <td>8/10</td>
    </tr>
    <tr>
        <td>James A. Pentel</td>
        <td>Marketing</td>
        <td>Better Packaging</td>
        <td>8/10</td>
    </tr>
    </tbody>
</table>


<table id="pattern-style-a" summary="Meeting Results">
    <thead>
    <tr>
        <th scope="col">Employee</th>
        <th scope="col">Salary</th>
        <th scope="col">Bonus</th>
        <th scope="col">Supervisor</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Stephen C. Cox</td>
        <td>$300</td>
        <td>$50</td>
        <td>Bob</td>
    </tr>
    <tr>
        <td>Josephin Tan</td>
        <td>$150</td>
        <td>-</td>
        <td>Annie</td>
    </tr>
    <tr>
        <td>Joyce Ming</td>
        <td>$200</td>
        <td>$35</td>
        <td>Andy</td>
    </tr>
    <tr>
        <td>James A. Pentel</td>
        <td>$175</td>
        <td>$25</td>
        <td>Annie</td>
    </tr>
    </tbody>
</table>

<table id="pattern-style-b" summary="Meeting Results">
    <thead>
    <tr>
        <th scope="col">Nation</th>
        <th scope="col">Capital</th>
        <th scope="col">Language</th>
        <th scope="col">Unique</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Japan</td>
        <td>Tokyo</td>
        <td>Japanese</td>
        <td>Karate</td>
    </tr>
    <tr>
        <td>South Korea</td>
        <td>Seoul</td>
        <td>Korean</td>
        <td>Ginseng</td>
    </tr>
    <tr>
        <td>China</td>
        <td>Beijing</td>
        <td>Mandarin</td>
        <td>Kung-Fu</td>
    </tr>
    <tr>
        <td>Indonesia</td>
        <td>Jakarta</td>
        <td>Indonesian</td>
        <td>Batik</td>
    </tr>
    </tbody>
</table>
</body>
</html>